<template>
    <div>
        <div>
            <Breadcrumb :style="{ margin: '20px 0' }">
                <BreadcrumbItem>发布操作</BreadcrumbItem>
                <BreadcrumbItem>分类设置</BreadcrumbItem>
            </Breadcrumb>
            <ButtonGroup class="button">
                <Button type="primary" @click="createCategory">添加</Button>
            </ButtonGroup>
            <Table :columns="columns" :data="categoryList"></Table>
            <div>
                <Page :page-size="page.limit" :total="page.total" simple @on-change="pageChange"/>
            </div>
            <Modal v-model="editModel" title="分类编辑" @on-ok="saveCategory">
                <div class="field">
                    <div class="label">标题名称</div>
                    <Input v-model="cat.name" class="mb-10" placeholder="名称"/>
                </div>
                <div class="field">
                    <div class="label">关键字、话题（一行一个）</div>
                    <Input v-model="cat.keyword" type="textarea" :rows="4" placeholder=""/>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
import model from '../util/model'

export default {
    name: 'ContentCategory',
    data: function () {
        return {
            editModel: false,
            page: {
                limit: 10,
                skip: 0,
                total: 0
            },
            categoryList: [],

            isCreate: true,
            cat: {
                name: '',
                keyword: ''
            },
            columns: [
                {
                    title: '标题',
                    key: 'name'
                },
                {
                    title: '关键字/话题',
                    key: 'keyword'
                },
                {
                    title: '内容',
                    key: 'content'
                },
                {
                    title: '操作',
                    render: (h, p) => {
                        return h('div', [
                            h('Icon', {
                                props: {
                                    type: 'md-create',
                                    size: '14'
                                },
                                on: {
                                    'click': () => {
                                        this.editCategory(p)
                                    }
                                }
                            }),
                            h('Icon', {
                                props: {
                                    type: 'md-trash',
                                    size: '14'
                                },
                                on: {
                                    'click': () => {
                                        this.removeOne(p)
                                    }
                                }
                            })

                        ])
                    }
                }
            ],

        }
    },
    created: function () {
        this.getContentCategory()
    },
    methods: {
        getContentCategory: function () {
            let that = this
            model.contentCategory.find({}).skip(this.page.skip).limit(this.page.limit).exec((err, docs) => {
                console.log(docs)
                that.categoryList = docs
            })
        },
        createCategory: function () {
            this.editModel = true
        },
        // formatKeyword : function (params) {
        //     if(params === ''){
        //         return
        //     }else{
        //         let word = params.split('\n')
        //         return word;
        //     }
        //
        // },
        saveCategory: function () {
            let that = this
            if (this.isCreate) {
                model.contentCategory.find(this.cat, (err, docs) => {
                    if (docs.length > 0) {
                        that.$Message.info('分类已存在' + err)

                    } else {
                        model.contentCategory.insert(this.cat, (err, docs) => {
                            that.$Message.info('分类添加成功' + err)
                            that.getContentCategory()
                        })
                    }
                })

            } else {
                model.contentCategory.update(this.cat, (err, docs) => {
                    that.$Message.info('分类添加成功' + err)
                    that.getContentCategory()
                })
            }

        },
        editCategory: function (p) {
            console.log(p)
            this.isCreate = false
            this.cat = p.row
            this.editModel = true
        },
        pageChange: function (page) {
            this.page.skip = this.page.limit * page - this.page.limit
            this.getContentCategory()
        },
        removeOne : function (p) {
            let that = this
            model.contentCategory.remove({_id : p.row._id},(err,row)=>{
                if(row){
                    that.$Message.info('分类删除成功' + err)
                    that.getContentCategory()
                }
            })
        }

    }
}
</script>
<style scoped>
</style>
